#WeatherContainer{

    background-color: rgba(0,0,0,0);

}



#TextContainer{ 							/* Other */

    font-size:18px;

    font-family: Helvetica;

    font-weight: bold;

    color:black;

}



#city{										/* Weather City Position */

	position: absolute; top: 104px; right: 0px; down: 0px; left: 15px; width: 320px; height: 461px;

    // -webkit-transform: rotate(-90deg);

	//-moz-transform: rotate(-90deg);

	text-align: left;

	font-family: Helvetica;

	font-size: 24px;

	font-weight: 400;

	color: #b9b3b4;

	text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;

    //text-transform: uppercase;

	z-index: 14;

    opacity: 0.8;
	-webkit-transform:translateZ(900px);
 -webkit-transform:rotate(0deg);
    -webkit-animation-name: Custom_animation;



    -webkit-animation-duration: 60.0s;



	-webkit-transition-delay: 0s;	    



	-webkit-animation-iteration-count:infinite;



-webkit-animation-timing-function: linear;
z-index: 24;

}

@-webkit-keyframes Custom_animation {



0% {opacity: 1.0;  color: #fa823a; text-shadow: 1px -1px 4px #666; -webkit-transform:rotate(0deg) translateX(0px)  translateY(-0px);}
4% {opacity: 1.0; color: #fa823a; text-shadow: 1px -1px 4px #fa823a; -webkit-transform:rotate(0deg)	translateX(0px)  translateY(-0px);}
7% {opacity: 0.0; color: #999; text-shadow: 1px -1px 4px #fa823a;	-webkit-transform:rotate(0deg)	 translateX(0px)  translateY(-0px);}
15% {opacity: 0.0;}
17% {opacity: 1.0;   color: #333;
text-shadow: 1px 1px 4px #fa823a;}

30% {opacity: 1.0;}

50% {opacity: 1.0;     color: #FFF;
text-shadow: 0 0px 4px #ccc, 2px 1px 4px #fa823a, 2px 3px 6px #3;}

70% {opacity: 1.0;}

80% {opacity: 1.0;     color:#333;}
92% {opacity: 1.0;}
95% {opacity: 0.0;}
100% {opacity: 0.0;}

}



#temp{										/* Weather Temperature Position */

	position: absolute; top: 155px; right: 0px; down: 0px; left: -255px; width: 320px; height: 461px;

    text-align: right;

	font-family: Helvetica;

	font-size: 24px;

	font-weight: 400;

	text-shadow: 0px 0px 4px #000000, 0px 0px 8px #000000;
	
	color: #fa823a;

	text-transform: uppercase;

    opacity: 1;
	-webkit-transform:translateZ(900px);
 -webkit-transform:rotate(0deg);
    -webkit-animation-name: Custom_animation;



    -webkit-animation-duration: 60.0s;



	-webkit-transition-delay: 0s;	    



	-webkit-animation-iteration-count:infinite;



-webkit-animation-timing-function: linear;
z-index: 24;

}

@-webkit-keyframes Custom_animation {



0% {opacity: 1.0;  color: #fa823a; text-shadow: 1px -1px 4px #666; -webkit-transform:rotate(0deg) translateX(0px)  translateY(-0px);}
4% {opacity: 1.0; color: #fa823a; text-shadow: 1px -1px 4px #fa823a; -webkit-transform:rotate(0deg)	translateX(0px)  translateY(-0px);}
7% {opacity: 0.0; color: #999; text-shadow: 1px -1px 4px #fa823a;	-webkit-transform:rotate(0deg)	 translateX(0px)  translateY(-0px);}
15% {opacity: 0.0;}
17% {opacity: 1.0;   color: #333;
text-shadow: 1px 1px 4px #fa823a;}

30% {opacity: 1.0;}

50% {opacity: 1.0;     color: #FFF;
text-shadow: 0 0px 4px #ccc, 2px 1px 4px #fa823a, 2px 3px 6px #3;}

70% {opacity: 1.0;}

80% {opacity: 1.0;     color:#333;}
92% {opacity: 1.0;}
95% {opacity: 0.0;}
100% {opacity: 0.0;}

}



#desc{										/* Weather info Position */

	position: absolute; top: 130px; right: 0px; down: 0px; left: -185px; width: 320px; height: 461px;

	text-align: right;

	font-family: Helvetica;

	font-weight: normal;

	font-size: 15px;

	color: #b9b3b4;

	text-shadow:  #black 2px 2px 2px;

    opacity: 0.8;

	text-transform: lowercase;
	-webkit-transform:translateZ(900px);
 -webkit-transform:rotate(0deg);
    -webkit-animation-name: Custom_animation;



    -webkit-animation-duration: 60.0s;



	-webkit-transition-delay: 0s;	    



	-webkit-animation-iteration-count:infinite;



-webkit-animation-timing-function: linear;
z-index: 24;

}

@-webkit-keyframes Custom_animation {



0% {opacity: 1.0;  color: #fa823a; text-shadow: 1px -1px 4px #666; -webkit-transform:rotate(0deg) translateX(0px)  translateY(-0px);}
4% {opacity: 1.0; color: #fa823a; text-shadow: 1px -1px 4px #fa823a; -webkit-transform:rotate(0deg)	translateX(0px)  translateY(-0px);}
7% {opacity: 0.0; color: #999; text-shadow: 1px -1px 4px #fa823a;	-webkit-transform:rotate(0deg)	 translateX(0px)  translateY(-0px);}
15% {opacity: 0.0;}
17% {opacity: 1.0;   color: #333;
text-shadow: 1px 1px 4px #fa823a;}

30% {opacity: 1.0;}

50% {opacity: 1.0;     color: #FFF;
text-shadow: 0 0px 4px #ccc, 2px 1px 4px #fa823a, 2px 3px 6px #3;}

70% {opacity: 1.0;}

80% {opacity: 1.0;     color:#333;}
92% {opacity: 1.0;}
95% {opacity: 0.0;}
100% {opacity: 0.0;}

}



#TextContainer p{

	margin:0;

}



#weatherIcon{									/* Weather Icon sition */

	position: absolute; top: 97px; left: 212px; width: 320px; height: 461px; display: normal; opacity: 1;

	height:100;

	width:100;
	
	-webkit-box-reflect: below -6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(white));

}



